<template>
  <div class="wrapper">
    <vue-finder
      id="my_vuefinder"
      :request="request"
      :max-file-size="maxFileSize"
      :features="features" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FEATURES, FEATURE_ALL_NAMES } from '../src/features.js'

/** @type {import('../src/utils/ajax.js').RequestConfig} */

const request = {
  baseUrl: '/api',
  headers: { 'X-ADDITIONAL-HEADER': 'yes' },
  params: { additionalParam: 'yes' },
  body: { additionalBody: ['yes'] },

  transformRequest: (req) => {
    if (req.method === 'get') {
      req.params.vf = '1'
    }
    return req
  },
  xsrfHeaderName: 'CSRF-TOKEN',
}
// 上传最大字符
const maxFileSize = ref('2MB')

const features = [...FEATURE_ALL_NAMES]

const selectedFiles = ref([])

// an example how to show selected files, outside of vuefinder
// you can create a ref object and assign the items to it,
// then with a button click, you can get the selected items easily
const handleSelect = (selection) => {
  selectedFiles.value = selection
}

const handleButton = () => {
  console.log(selectedFiles.value)
}

const handleSelectButton = {
  // show select button
  active: true,
  // allow multiple selection
  multiple: false,
  // handle click event
  click: (items, event) => {
    if (!items.length) {
      alert('No item selected')
      return
    }
    alert('Selected: ' + items[0].path)
  },
}
</script>

<style>
body {
  margin: 0;
  background: #eeeeee;
}
.wrapper {
  max-width: 800px;
  margin: 80px auto;
}
.btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  outline: none;
}
</style>
